<template>
  <v-app>
    <v-container grid-list-sm>
      <v-row>
        <h1>hello {{ user }}</h1>
        <v-btn class="justify-right" color="info" @click="quit">quit</v-btn>
      </v-row>
      <v-row>
        <chatroom></chatroom>
      </v-row>
      <v-row>{{ error }}</v-row>
    </v-container>
    <router-view></router-view>
  </v-app>
</template>
<style></style>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Chatroom from "../views/Chatroom.vue";
@Component({
  components: {
    Chatroom
  }
})
export default class Dashboard extends Vue {
  baseUrl = "http://localhost:3000/login/dashboard";
  user = "";
  error = "";
  currentUser: string | null = "";
  created() {
    this.user = this.$route.params.pathMatch;
    console.log(this.$route.params.pathMatch);
    this.axios
      .get(this.baseUrl, {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("currentUser")
        }
      })
      .then(res => {
        console.log(res.data);
        if (res.data.name != this.user) {
          this.error = res.data.name + this.user;
          this.$router.push("/error");
        }
      });
  }
  quit() {
    localStorage.removeItem("currentUser");
    this.$router.push("/login");
  }
}
</script>
